<template>
	<div class="form-box">
		<div class="survey-card">
			<div class="title">
				佣金概览
			</div>
			<el-row :gutter="12">
				<el-col :span="6">
					<el-card shadow="hover">
						<div class="price">{{ surveyData.withdrawal[0] }}</div>
						<div>可提现佣金（元）</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="hover">
						<div class="price">{{ surveyData.withdrawal[1] }}</div>
						<div>提现待审核（元）</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="hover">
						<div class="price">{{ surveyData.withdrawal[2] }}</div>
						<div>提现成功佣金（元）</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="hover">
						<div class="price">{{ surveyData.withdrawal[3] }}</div>
						<div>进行中佣金（元）</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<div class="survey-card">
			<div class="title">
				分销商概览
			</div>
			<el-row :gutter="12">
				<el-col :span="8">
					<el-card shadow="hover">
						<div class="price">{{ surveyData.user[0] }}</div>
						<div>待审核（人）</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div class="price">{{ surveyData.user[1] }}</div>
						<div>分销商（人）</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<div class="survey-card">
			<div class="title">
				分销概览
			</div>
			<el-row :gutter="12">
				<el-col :span="8">
					<el-card shadow="hover">
						<div class="price">{{ surveyData.total[0] }}</div>
						<div>分销订单总额（元）</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div class="price">{{ surveyData.total[1] }}</div>
						<div>分销佣金总额（元）</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div class="price">{{ surveyData.total[2] }}</div>
						<div>分销商品数（个）</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
export default {
	name: "fenxiao-surveys",
	data() {
		return {
			surveyData: {
				withdrawal: ["0.00", "0.00", "0.00", "0.00"],
				user: ["0", "0"],
				total: ["0.00", "0.00", "0"]
			}
		}
	},
	mounted() {
		this.getSurveyData();
	},
	methods:{
		getSurveyData() {
			this.$API.fenxiao.config.surveys().then(res => {
				if (res.code === 0) {
					this.surveyData = res.data;
				}
				else {
					this.$message.error(res.message);
				}
			});
		}
	}
}
</script>

<style lang="scss">
.form-box {
	background-color: #fff;
	padding: 15px;

	.form-box-title {
		background-color: #c3e5f3;
		padding: 5px 0 5px 15px;
		font-weight: 700;
	}

}
.survey-card{
	padding-top: 15px;
	.title{
		margin: 15px 0;
		border-left: 2px solid #00a0e9;
		padding-left: 15px;
		font-weight: 700;
	}
	.price{
		color: #F00;
		font-size: 30px;
	}
}
</style>
